import { MoneyCollectOutlined } from '@ant-design/icons'
import {
  Button,
  Checkbox,
  Col,
  Flex,
  Form,
  Input,
  message,
  Radio,
  Row,
  Select,
  Typography
} from 'antd'
import React, { useState } from 'react'
import { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import MyDatePicker from '../components/MyDatePicker'
import {
  adminCouponAdd,
  adminCouponEdit,
  adminCouponInfo
} from '../service/activaty'
import moment from 'moment'

export default function MarketAddCoupon() {
  const navigate = useNavigate()
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()
  // 新建活动还是编辑活动
  const [title, setTitle] = useState(isEditing ? '编辑优惠券' : '新建优惠券')
  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 有效期
  const [expiration, setExpiration] = useState('1')
  const [isMenkan, setIsMenkan] = useState('0')
  //订单金额
  const [orderNum, setOrderNum] = useState(0)
  // 选择的是否互斥
  const [huchi, setHuchi] = useState('0')
  // 互斥多选框
  const huchiOptions = [
    {
      label: '满减券',
      value: '0'
    },
    {
      label: '满折券',
      value: '1'
    },
    {
      label: '随机券',
      value: '2'
    }
  ]
  // 设置初始化日期
  const [initialDate, setInitialDate] = useState([
    moment(new Date()),
    moment(new Date())
  ])
  useEffect(() => {
    if (isEditing) {
      ;(async () => {
        const res = await adminCouponInfo(id)
        console.log(res)
        form.setFieldsValue(res.data)
        // 设置日期
        // setInitialDate([
        //   moment(res.data.startDate.substring(0, 10)),
        //   moment(res.data.endDate.substring(0, 10))
        // ])
      })()
    } else {
    }
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>{title}</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Title level={4}>内容信息</Typography.Title>
        </Col>
        <Col span={24}>
          <Form
            labelCol={{
              span: 2
            }}
            wrapperCol={{
              span: 12
            }}
            style={{ width: '100%', marginTop: 30 }}
            form={form}
            onFinish={async (values) => {
              console.log(values)
              // 如果是指定时间段
              values.startDate = selectedDateString[0] + ' 0:0:0'
              values.endDate = selectedDateString[1] + ' 23:59:59'
              if (isEditing) {
                const res = await adminCouponEdit({ ...values, id })
                console.log(res)
                if (res.code === '0') {
                  message.success('编辑成功')
                  navigate('/admin/market/coupon')
                } else {
                  message.error('编辑失败')
                }
              } else {
                const res = await adminCouponAdd(values)
                console.log(res)

                if (res.code === '0') {
                  message.success('添加成功')
                  navigate('/admin/market/coupon')
                } else {
                  message.error('添加失败')
                }
              }
            }}
          >
            <Form.Item
              label="优惠券类型"
              name={'couponType'}
              rules={[{ required: true, message: '请选择优惠券类型' }]}
            >
              <Select
                options={[
                  { value: 0, label: '现金券' },
                  { value: 1, label: '满减券' },
                  { value: 2, label: '满折券' },
                  { value: 3, label: '随机券' },
                  { value: 4, label: '折扣券' }
                ]}
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item
              label="优惠券名称"
              name="couponName"
              rules={[{ required: true, message: '请输入优惠券名称' }]}
            >
              <Input
                maxLength={10}
                showCount
                placeholder="最多10个字"
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item
              label="优惠券描述 "
              name="describes"
              rules={[{ required: true, message: '请输入优惠券描述' }]}
            >
              <Input.TextArea
                maxLength={10}
                showCount
                placeholder="最多10个字"
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item
              label="发行总量"
              name="maxUsageLimit"
              rules={[{ required: true, message: '请输入发行总量' }]}
            >
              <Input
                maxLength={10}
                showCount
                placeholder="不能超过100万张"
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item
              label="适用范围"
              name="applicable"
              initialValue={'全场通用'}
            >
              <Radio.Group buttonStyle="solid">
                <Radio.Button value="全场通用" checked>
                  全场通用
                </Radio.Button>
                <Radio.Button value="1" disabled>
                  指定类型
                </Radio.Button>
                <Radio.Button value="2" disabled>
                  指定商品
                </Radio.Button>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              label="优惠券面额"
              name="discountValue"
              rules={[{ required: true, message: '请输入优惠券面额' }]}
            >
              <Input
                type="number"
                value="0"
                addonAfter={'￥'}
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item label="有效期">
              <Radio.Group
                defaultValue={'1'}
                buttonStyle="solid"
                style={{ marginRight: 10 }}
                onChange={(e) => {
                  console.log(e.target.value)
                  setExpiration(e.target.value)
                }}
              >
                <Radio.Button value="1">指定时间段</Radio.Button>
                <Radio.Button value="2" disabled>
                  从领取日期起多少天内有效
                </Radio.Button>
              </Radio.Group>
              {expiration === '1' && (
                <MyDatePicker
                  selectedDateString={selectedDateString}
                  setSelectedDateString={setSelectedDateString}
                  initialDate={initialDate}
                />
              )}
              {expiration === '2' && (
                <Input type="number" style={{ width: 300 }} />
              )}
            </Form.Item>
            <Form.Item
              label="每人限领"
              name="usageLimit"
              rules={[{ required: true, message: '请输入每人限领' }]}
            >
              <Input
                type="number"
                addonAfter={'张'}
                style={{ width: 300 }}
                placeholder="默认每人限领一张"
              />
            </Form.Item>
            <Form.Item
              label="互斥规则"
              name="exclusionType"
              initialValue={huchi}
            >
              <Radio.Group
                onChange={(e) => {
                  console.log(e.target.value)
                  setHuchi(e.target.value)
                }}
              >
                <Radio value="0">不互斥</Radio>
                <Radio value="1">与指定类型互斥</Radio>
              </Radio.Group>
            </Form.Item>
            {huchi === '1' && (
              <Row style={{ marginBottom: 20 }}>
                <Col span={8} offset={2}>
                  <Checkbox.Group options={huchiOptions} />
                </Col>
              </Row>
            )}

            <Form.Item label="消费门槛">
              <Radio.Group
                onChange={(e) => {
                  setIsMenkan(e.target.value)
                }}
                value={isMenkan}
                defaultValue={'0'}
              >
                <Radio value="0">无门槛</Radio>
                <Radio value="1">订单满</Radio>
              </Radio.Group>
              {isMenkan === '1' && (
                <Input
                  defaultValue="0"
                  addonAfter="￥"
                  style={{ width: 100 }}
                />
              )}
            </Form.Item>

            <Form.Item
              label="叠加规则"
              name="usageNum"
              rules={[{ required: true, message: '请输入叠加规则' }]}
            >
              <Input
                type="number"
                addonAfter={'张'}
                style={{ width: 300 }}
                placeholder="默认每人最多使用一张"
              />
            </Form.Item>
            <Form.Item
              label="最大抵扣面额"
              name="maxDiscountAmount"
              rules={[{ required: true, message: '请输入最大抵扣面额' }]}
            >
              <Input
                type="number"
                addonAfter={'元'}
                style={{ width: 300 }}
                placeholder="最大抵扣面额"
              />
            </Form.Item>
            <Form.Item label=" " colon={false}>
              <Button type="primary" htmlType="submit">
                发布
              </Button>
              <Button
                type="default"
                htmlType="reset"
                style={{ marginLeft: 10 }}
              >
                重置
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </>
  )
}
